<template>
    <h1 style="margin-left: 20px;">讲师列表</h1>
    <div style="margin-left: 20px;">
        <el-form :inline="true" :model="teacherQuery" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="teacherQuery.name" placeholder="讲师姓名" clearable/>
            </el-form-item>
            <el-form-item>
                <el-select v-model="teacherQuery.lever" placeholder="讲师头衔">
                    <el-option label="高级讲师" :value="1" />
                    <el-option label="首席讲师" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="添加时间">
                <el-date-picker v-model="teacherQuery.begin" type="date" placeholder="请选择开始时间" />
                <el-date-picker v-model="teacherQuery.end" type="date" placeholder="请选择结束时间" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset">清空</el-button>
            </el-form-item>
        </el-form>
        <el-table border :data="teacherList" style="width: 100%">
            <el-table-column prop="index" label="序号" width="70" type="index" :index="indexMethod" align="center" />
            <el-table-column prop="name" label="名称" width="70" align="center" />
            <el-table-column prop="level" label="头衔" width="100" align="center">
                <template #default="scope">
                    {{ scope.row.level === 1 ? '高级讲师' : '首席讲师' }}
                </template>
            </el-table-column>
            <el-table-column prop="intro" label="资历" align="center" />
            <el-table-column prop="gmtCreate" label="添加时间" width="180" align="center" />
            <el-table-column prop="sort" label="排序" width="70" align="center" />
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary">更改</el-button>
                    <el-button size="small" type="danger">查询</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px;display: flex;justify-content: center;" v-model:current-page="page"
            v-model:page-size="limit" layout="total, prev, pager, next, jumper" :total="totalCount"
            @current-change="init" />
    </div>

</template>
<script setup>
import { reactive, ref, toRefs } from 'vue'
import teacherApi from '../../api/teacher'

// 分页相关数据
const page = ref(1) //当前页
const limit = ref(8) // 每页记录数
const totalCount = ref(0) // 总记录数

const state = reactive({
    teacherList: [], // 讲师列表数据
    teacherQuery: {} //讲师列表查询参数对象
})

// 解构
const { teacherList, teacherQuery } = toRefs(state)

// 封装请求讲师信息api方法
const init = (pageIndex=1) => {
    page.value=pageIndex
    teacherApi.getList(page.value, limit.value, state.teacherQuery).then(res => {
        state.teacherList = res.data.items

        // 为总记录数赋值
        totalCount.value = res.data.totalCount
    })
}

// 调用api接口获取讲师列表数据
init()

const indexMethod = (index) => {
    return index + 1
}

// 分页
// const goToPage = (pageIndex) => {
//     init(pageIndex)
// }

// 多条件搜索
const search = () => {
    // 请求讲师信息api
    init()
}

const reset=()=>{
    state.teacherQuery={}
    init()
}

</script>